<template>
  <div class="inline-flex items-center">
    <div class="mr-1">{{ title }}</div>
    <i v-if="star" class="form-star mr-1">*</i>
    <el-tooltip
      v-if="!!content"
      effect="dark"
      :placement="placement"
      :content="content"
    >
      <app-icon name="help" color="#8A8E9A" class="w-[16px] h-[16px]" />
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import type { Placement } from 'element-plus'

interface IProps {
  title: string
  content: string
  star?: boolean
  placement?: Placement
}

withDefaults(defineProps<IProps>(), {
  placement: 'top'
})
</script>

<style lang="scss" scoped>
.form-star {
  color: var(--el-color-danger);
  margin-left: 4px;
}
</style>
